<template>
    <div class="bottomBar">
        <item title="首页"  mark="/home" :curr="currnav" @change="getVal">
            <template #normalImg>  <img src="../assets/imgs/首页.png" alt="" /> </template>
            <template #activeImg>  <img src="../assets/imgs/首页-selected.png" alt="" /> </template>
        </item>
        <item title="书影音"  mark="/BookAndMovie" :curr="currnav" @change="getVal">
            <template #normalImg>  <img src="../assets/imgs/movie.png" alt="" /> </template>
            <template #activeImg>  <img src="../assets/imgs/movie-selected.png" alt="" /> </template>
        </item>
         <item title="广播"  mark="/broadcast" :curr="currnav" @change="getVal">
            <template #normalImg>  <img src="../assets/imgs/radio.png" alt="" /> </template>
            <template #activeImg>  <img src="../assets/imgs/radio-selected.png" alt="" /> </template>
        </item>
         <item title="小组"  mark="/group" :curr="currnav" @change="getVal">
            <template #normalImg>  <img src="../assets/imgs/group.png" alt="" /> </template>
            <template #activeImg>  <img src="../assets/imgs/group-selected.png" alt="" /> </template>
        </item>
         <item title="我的"  mark="/my" :curr="currnav" @change="getVal">
            <template #normalImg>  <img src="../assets/imgs/my.png" alt="" /> </template>
            <template #activeImg>  <img src="../assets/imgs/my-selected.png" alt="" /> </template>
        </item>
    </div>
</template>
<script>
import item from './item.vue'
export default {
    components:{item},
    data(){
        return {
            currnav:'/home'
        }
    },
    methods:{
        getVal(val){
            this.currnav = val;
        }
    },
    watch:{
        '$route.path':{
            handler(newVal,oldVal){
                if (this.$route.meta.title == 'BookAndMovie') {
                    this.currnav = '/BookAndMovie'
                }else{
                    this.currnav = newVal
                }
                
            }
        }
    }
}
</script>

<style lang="less" scoped>
.bottomBar {
  position: fixed;
  display: flex;
  height: 45px;
  bottom: 0;
  width: 100vw;
  border-top: 1px solid #ccc;
  justify-content: space-between;
  padding: 3px;
  background: #fff;
  img{
    height: 50%;
    width: 35%;
  }
}
</style>